{% extends "tools/base_tool.html" %}

{% block title %}文档查看{% endblock %}

{% block styles %}
<link rel="stylesheet" href="/static/css/documentation.css">
{% endblock %}

{% block content %}
<div class="container">
  <div id="tool-data" data-categories="{{ categories|tojson }}" class="hidden"></div>
  <h1 id="doc-title">加载中...</h1>
  
  <div id="loading-indicator">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">加载中...</span>
    </div>
    <p>正在加载文档内容...</p>
  </div>
  
  <div id="error-message"></div>
  
  <div id="doc-content" class="doc-content"></div>
  

</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 保留的加载指示器逻辑
    const loadingIndicator = document.getElementById('loading-indicator');
    const errorMessage = document.getElementById('error-message');
    const docTitle = document.getElementById('doc-title');
    const docContent = document.getElementById('doc-content');
        
    // 保留的文档加载逻辑
    const docId = '{{ doc_id }}';
    fetch(`/api/documentation/content/${docId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('文档加载失败，请稍后重试');
        }
        return response.json();
      })
      .then(data => {
        // 隐藏加载指示器
        loadingIndicator.style.display = 'none';
        docContent.style.display = 'block';
        
        // 更新标题和内容
        docTitle.textContent = data.title;
        docContent.innerHTML = data.html_content;
        
        // 更新页面标题
        document.title = data.title + ' - LiberTool';
      })
      .catch(error => {
        // 显示错误信息
        loadingIndicator.style.display = 'none';
        errorMessage.style.display = 'block';
        errorMessage.textContent = '数据解析失败：' + error.message;
        console.error('文档加载错误:', error);
        
        // 添加重试按钮
        errorMessage.innerHTML = `
          <p>${errorMessage.textContent}</p>
          <button class="btn btn-primary mt-2" onclick="location.reload()">
            重新加载
          </button>
        `;
      });
  });
</script>
{% endblock %}